<template>
  <div>
    <!-- 轮播图部分，注意要为它设置高度 -->
    <mt-swipe :auto="3000">
      <!-- 在组建中使用v-for一定要绑定key -->
      <mt-swipe-item v-for="item in lunboList" :key="item">
        <!-- 因为src是普通属性，所以要加v-bind绑定，才能正常使用item,注意要加引号 -->
        <img :src="item" alt>
      </mt-swipe-item>
      <!-- <mt-swipe-item>2</mt-swipe-item>
      <mt-swipe-item>3</mt-swipe-item>-->
    </mt-swipe>

    <!-- 自定义的菜单列表 -->
    <!-- <div class="products">
       <ul class="menu_list">
           <li><a href=""><img src="../images/menu/menu1.png" alt=""></a><p>新闻资讯</p></li>
           <li><a href=""><img src="../images/menu/menu2.png" alt=""></a><p>图片分享</p></li>
           <li><a href=""><img src="../images/menu/menu3.png" alt=""></a><p>商品购买</p></li>
           <li><a href=""><img src="../images/menu/menu4.png" alt=""></a><p>留言反馈</p></li>
           <li><a href=""><img src="../images/menu/menu5.png" alt=""></a><p>视频专区</p></li>
           <li><a href=""><img src="../images/menu/menu6.png" alt=""></a><p>联系我们</p></li>
       </ul>
    </div>-->
    <!-- 使用MUI的列表 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newsList">
          <img src="../images/menu/menu1.png" alt="">
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../images/menu/menu2.png" alt="">
          <div class="mui-media-body">图片分享</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../images/menu/menu3.png" alt="">
          <div class="mui-media-body">商品购买</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../images/menu/menu4.png" alt="">
          <div class="mui-media-body">留言反馈</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
         <img src="../images/menu/menu5.png" alt="">
          <div class="mui-media-body">视频专区</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../images/menu/menu6.png" alt="">
          <div class="mui-media-body">联系我们</div>
        </a>
      </li>
    </ul>
  </div>
</template>
<style scoped>
* {
  padding: 0;
  margin: 0;
}

body {
  font-size: 16px;
}
p {
  color: black;
}

.mint-swipe {
  height: 200px;
}
/* .mint-swipe .mint-swipe-item:nth-child(1){
       background-color: #ff009d;
   }
   .mint-swipe .mint-swipe-item:nth-child(2){
       background-color: pink;
   }
   .mint-swipe .mint-swipe-item:nth-child(3){
       background-color: cyan;
   } */

.menu_list {
  display: flex;
  flex-wrap: wrap;
}
ul li img {
  width: 60px;
  height: 60px;
}

.menu_list li {
  width: 33.333%;
  margin-top: 10px;
  /* padding-left:35px; */
  text-align: center;
}

.menu_list li:nth-last-of-type(-n + 3) {
  margin-top: 40px;
}

ul,
li {
  list-style: none;
}
.mui-table-view{
    background-color: white;
    border:none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: 0;
}
</style>
<script>
export default {
  data: function() {
    return {
      lunboList: [
        //    注意：这里要加require，不然图片无法显示
        require("../images/lunbo/lunbo1.jpg"),
        require("../images/lunbo/lunbo2.jpg"),
        require("../images/lunbo/lunbo3.jpg")
      ]
    };
  }

  //由于下面的数据接口用不了，所以就用假数据来代替，理解万岁
  //    created(){
  //        this.getlunbo()
  //    },
  //    methods:{
  //        getlunbo:function () {   //获取轮播图数据
  //            this.$http.get('http://vue.studyit.io/api/getlunbo').then(res => {
  //                this.lunboList = res.body.img
  //            })
  //         }
  //    }
}
</script>
